<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <link rel="icon" th:href="@{/favicon.png}" type="image/png"/>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 原有样式保持不变 */
        .drawer {
            position: fixed;
            top: 0;
            right: -500px;
            width: 500px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
            transition: right 0.3s ease;
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
        }

        .drawer.open {
            right: 0;
        }

        .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .drawer-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }

        .drawer-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }

        .drawer-close:hover {
            color: #333;
        }

        .drawer-table {
            width: 100%;
            border-collapse: collapse;
        }

        .drawer-th,
        .drawer-td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .drawer-th {
            background-color: #f2f2f2;
        }

        .drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }

        .drawer-backdrop.open {
            display: block;
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .th,
        .td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .th {
            background-color: #f2f2f2;
        }

        .button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 0 2px;
        }

        .button:hover {
            background-color: #45a049;
        }

        /* 新增全局容器样式 */
        .container {
            display: flex;
            gap: 20px;
            margin: 20px;
        }

        /* 搜索框区域靠左 */
        .search-container {
            width: 300px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 展示区域靠右 */
        .content-container {
            flex: 1;
        }

        /* 悬浮表单样式 */
        .student-form {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            z-index: 1100;
            width: 500px;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            display: none;
        }

        .student-form.active {
            display: block;
        }

        .student-form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .close-button {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }

        .close-button:hover {
            color: #333;
        }

        .student-form-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1050;
            display: none;
        }

        .student-form-backdrop.active{
            display: block;
        }

        /* 搜索区域样式优化 */
        .search-container > div {
            margin-bottom: 15px;
        }

        .search-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        .search-container input,
        .search-container select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* 表格样式区域优化 */
        .content-container h3 {
            margin-top: 0;
            color: #333;
        }

        /* 分页区域样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            gap: 10px;
        }

        /* 操作按钮区域 */
        .action-buttons {
            margin-top: 20px;
            text-align: center;
        }

        /* 添加学生按钮样式 */
        .add-student-btn {
            margin-bottom: 20px;
        }

        /* 添加人数统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .stat-card {
            background: linear-gradient(145deg, #f5f7fa, #e4e9f0);
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            border: 1px solid #e0e6ed;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .stat-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            background-color: rgba(66, 133, 244, 0.2);
            border: 1px solid rgba(66, 133, 244, 0.3);
        }

        .stat-title {
            color: #333333;
            font-size: 0.9rem;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(66, 133, 244, 0.2);
            color: #1a1a1a;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 添加全局容器 -->
    <div class="container">
        <!-- 搜索框区域靠左 -->
        <div class="search-container">
            <h3>搜索条件</h3>
            <p>为空时，搜索全部</p>
            <div>
                <label>
                    学号：<input type="text" v-model="searchBase.studentId" placeholder="请输入学号" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>
                    姓名：<input type="text" v-model="searchBase.name" placeholder="请输入姓名" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>
                    年龄: <input type="text" v-model="searchBase.age" placeholder="请输入年龄" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>性别: </label>
                <select v-model="searchBase.gender" @change="loadStudents">
                    <option value="">请选择</option>
                    <option value="MALE">男</option>
                    <option value="FEMALE">女</option>
                </select>
            </div>
            <div>
                <label>
                    班级：<input type="text" v-model="searchBase.classNum" placeholder="请输入班级" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>类型：</label>
                <select v-model="searchBase.type" @change="loadStudents">
                    <option value="">请选择</option>
                    <option value="UNDERGRAD">本科生</option>
                    <option value="GRADUATE">研究生</option>
                </select>
            </div>
            <div>
                <label>
                    省份：<input type="text" v-model="searchBase.province" placeholder="请输入省份" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>
                    城市：<input type="text" v-model="searchBase.city" placeholder="请输入城市" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>
                    街道：<input type="text" v-model="searchBase.street" placeholder="请输入街道" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>
                    门牌号：<input type="text" v-model="searchBase.doorNumber" placeholder="请输入门牌号" @keydown.enter="loadStudents">
                </label>
            </div>
            <div v-if="searchBase.type === 'UNDERGRAD'">
                <label>
                    专业：<input type="text" v-model="searchBase.major" placeholder="请输入专业" @keydown.enter="loadStudents">
                </label>
            </div>
            <div v-if="searchBase.type === 'GRADUATE'">
                <label>
                    导师：<input type="text" v-model="searchBase.supervisor" placeholder="请输入导师" @keydown.enter="loadStudents">
                </label>
            </div>
            <div v-if="searchBase.type === 'GRADUATE'">
                <label>
                    研究领域：<input type="text" v-model="searchBase.researchFiled" placeholder="请输入研究领域" @keydown.enter="loadStudents">
                </label>
            </div>
            <div>
                <label>排序方案：</label>
                <select v-model="sortField" @change="loadStudents">
                    <option value="student_id">学号</option>
                    <option value="name">姓名</option>
                    <option value="age">年龄</option>
                    <option value="classNum">班级</option>
                </select>
                <select v-model="sortOrder" @change="loadStudents">
                    <option value="asc">升序</option>
                    <option value="desc">降序</option>
                </select>
            </div>
        </div>

        <!-- 展示区域靠右 -->
        <div class="content-container">
            <!--学生表格区域-->
            <div>
                <h3>学生信息</h3>
                <table class="table">
                    <thead class="table-header">
                    <tr class="table-row">
                        <th class="th">学号</th>
                        <th class="th">姓名</th>
                        <th class="th">年龄</th>
                        <th class="th">性别</th>
                        <th class="th">班级</th>
                        <th class="th">类型</th>
                        <th class="th">地址</th>
                        <th class="th">就学信息</th>
                        <th class="th">成绩</th>
                        <th class="th">操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="(student, index) in students" :key="index" class="table-row">
                        <td class="td">{{ student.studentId }}</td>
                        <td class="td">{{ student.name }}</td>
                        <td class="td">{{ student.age }}</td>
                        <td class="td">{{ student.gender === 'MALE' ? '男' : '女' }}</td>
                        <td class="td">{{ student.type === 'UNDERGRAD' ? '本科生' : '研究生' }}</td>
                        <td class="td">{{ student.classNum }}</td>
                        <td class="td">{{ student.province }}{{ student.city }}{{ student.street }}{{student.doorNumber}}</td>
                        <td class="td">
                            <span v-if="student.type === 'UNDERGRAD'">{{ student.major }}</span>
                            <div v-else>
                                <div>导师：{{ student.supervisor }}</div>
                                <div>方向：{{ student.researchFiled }}</div>
                            </div>
                        </td>
                        <td class="td">
                            <button class="button" @click="loadStudentScores(student.scores)">查看成绩</button>
                        </td>
                        <td class="td">
                            <button class="button" @click="updateStudentForm(index)">编辑</button>
                            <button class="button" @click="deleteStudent(student.studentId)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <!--分页管理-->
                <div class="pagination">
                    <span>第 {{ currentPage }} 页<br>共 {{ totalPages }} 页</span>
                    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
                    <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
                    <select v-model="pageSize" @change="changePageSize">
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                    </select>
                </div>

                <!--增添学生信息按钮-->
                <div class="action-buttons">
                    <button class="button add-student-btn" @click="openStudentForm">新增学生</button>
                </div>
            </div>

            <!--学生人数统计-->
            <div class="stats-container" v-if="currentView === 'list'">
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-icon">👥</div>
                        <div>
                            <div class="stat-title">总学生数</div>
                            <div class="stat-value">{{ stats.total || 0 }}</div>
                        </div>
                    </div>
                    <div class="stat-sub">实时更新数据</div>
                </div>

                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-icon">🎓</div>
                        <div>
                            <div class="stat-title">本科生</div>
                            <div class="stat-value">{{ stats.undergradCount || 0 }}</div>
                        </div>
                    </div>
                    <div class="stat-sub">占比 {{ undergradPercent }}%</div>
                </div>

                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-icon">📚</div>
                        <div>
                            <div class="stat-title">研究生</div>
                            <div class="stat-value">{{ stats.graduateCount || 0 }}</div>
                        </div>
                    </div>
                    <div class="stat-sub">占比 {{ graduatePercent }}%</div>
                </div>
            </div>
        </div>
    </div>

    <!--抽屉显示学生成绩-->
    <div class="drawer" :class="{ open: isDrawerOpen }">
        <div class="drawer-header">
            <h3 class="drawer-title">成绩信息</h3>
            <button class="drawer-close" @click="closeDrawer">×</button>
        </div>
        <table class="drawer-table">
            <thead>
            <tr class="drawer-row">
                <th class="drawer-th">课程名</th>
                <th class="drawer-th">分数</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(score, course) in grades" :key="course" class="drawer-row">
                <td class="drawer-td">{{ course }}</td>
                <td class="drawer-td">{{ score }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!--抽屉背景遮罩-->
    <div class="drawer-backdrop" :class="{ open: isDrawerOpen }" @click="closeDrawer"></div>

    <!--学生信息增改悬浮表单-->
    <div class="student-form" :class="{ active: showStudentForm }">
        <div class="student-form-content">
            <div class="student-form-header">
                <h3>{{ formState === 'UPDATE' ? '编辑学生信息' : '新增学生信息' }}</h3>
                <button class="close-button" @click="closeStudentForm">×</button>
            </div>

            <div>
                <label>
                    学号：<input type="text" v-model="studentForm.studentId" placeholder="请输入学号">
                </label>
                <label>
                    姓名：<input type="text" v-model="studentForm.name" placeholder="请输入姓名">
                </label>
            </div>
            <div>
                <label>
                    年龄：<input type="number" v-model="studentForm.age" placeholder="请输入年龄">
                </label>
                <label>
                    性别:<select v-model="studentForm.gender">
                    <option value="MALE">男</option>
                    <option value="FEMALE">女</option>
                </select>
                </label>
            </div>
            <div>
                <label>
                    类型：<select v-model="studentForm.type">
                    <option value="UNDERGRAD">本科生</option>
                    <option value="GRADUATE">研究生</option>
                </select>
                </label>
                <label>
                    班级：<input type="text" v-model="studentForm.classNum" placeholder="请输入班级">
                </label>
            </div>
            <div>
                <label>
                    地址：<input type="text" v-model="studentForm.province" placeholder="请输入省">
                    <input type="text" v-model="studentForm.city" placeholder="请输入市">
                    <input type="text" v-model="studentForm.street" placeholder="请输入区">
                    <input type="text" v-model="studentForm.doorNumber" placeholder="请输入门牌号">
                </label>
            </div>
            <div v-if="studentForm.type === 'GRADUATE'">
                <label>
                    导师：<input type="text" v-model="studentForm.supervisor" placeholder="请输入导师">
                </label>
                <label>
                    研究方向：<input type="text" v-model="studentForm.researchFiled" placeholder="请输入方向">
                </label>
            </div>
            <div v-else>
                <label>
                    专业：<input type="text" v-model="studentForm.major" placeholder="请输入专业">
                </label>
            </div>

            <!--成绩动态输入-->
            <div>
                <label>成绩信息：</label>
                <div v-for="(score, course) in studentForm.scores" :key="course">
                    <input type="text" v-model="course" placeholder="请输入课程名" @focusin="tempCourse(course)"
                           @focusout="updateCourse(courseTemp,$event.target.value)">
                    <input type="number" v-model="score" placeholder="请输入成绩"
                           @focusout="updateScore(course, $event.target.value)">
                    <button class="button" @click="removeCourse(course)">删除成绩</button>
                </div>
            </div>
            <button class="button" @click="addCourse">添加成绩</button>

            <div class="student-form-buttons">
                <button @click="closeStudentForm">取消</button>
                <button v-if="formState === 'ADD'" @click="addStudent">添加</button>
                <button v-if="formState === 'UPDATE'" @click="updateStudent">更新</button>
            </div>
        </div>
    </div>

    <!--悬浮表单遮罩-->
    <div class="student-form-backdrop" :class="{ active: showStudentForm }"></div>
</div>

<script type="module">
    // JavaScript代码保持不变
    const {createApp} = Vue;

    createApp({
        data() {
            return {
                searchBase: {
                    studentId: '',
                    name: '',
                    age: '',
                    gender: '',
                    classNum: '',
                    type: '',
                    province: '',
                    city: '',
                    street: '',
                    doorNumber: '',
                    major: '',
                    supervisor: '',
                    researchFiled: ''
                },
                students: [],
                currentPage: 1,
                pageSize: 10,
                totalPages: 1,
                sortField: 'student_id',
                sortOrder: 'asc',
                isDrawerOpen: false,
                grades: {},
                showStudentForm: false,
                formState: 'ADD',
                studentIdTemp: '',
                courseTemp: '',
                studentForm: {
                    studentId: '',
                    name: '',
                    age: '',
                    gender: '',
                    classNum: '',
                    type: '',
                    province: '',
                    city: '',
                    street: '',
                    doorNumber: '',
                    major: '',
                    supervisor: '',
                    researchFiled: '',
                    scores: {}
                },
                currentView: 'list',
                stats: {
                    total: 0,
                    undergradCount: 0,
                    graduateCount: 0
                }
            }
        },
        created() {
            this.loadStudents();
            this.fetchStats()
            // // 添加事件监听实现自动刷新
            // this.$emitter.on('data-updated', () => {
            //     this.fetchStats()
            // })
        },
        computed: {
            undergradPercent() {
                return this.calculatePercentage(this.stats.undergradCount)
            },
            graduatePercent() {
                return this.calculatePercentage(this.stats.graduateCount)
            }
        },
        methods: {
            async loadStudents() {
                try {
                    const params = {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        sort: this.sortField,
                        order: this.sortOrder,
                        searchBase: this.searchBase
                    }

                    const response = await axios.post('http://localhost:8080/api/students/search', params)
                    this.students = response.data.data.list;
                    this.totalPages = Math.ceil(response.data.data.total / params.pageSize);
                } catch (error) {
                    console.error('Error loading students:', error);
                }
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.loadStudents();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.loadStudents();
                }
            },
            changePageSize() {
                this.currentPage = 1;
                this.loadStudents();
            },
            loadStudentScores(scores) {
                this.isDrawerOpen = true;
                this.grades = scores;
            },
            async closeDrawer() {
                this.isDrawerOpen = false;
            },
            updateStudentForm(index) {
                this.formState = 'UPDATE';
                this.studentIdTemp = this.students[index].studentId;
                this.studentForm = this.students[index];
                this.showStudentForm = true;
            },
            async deleteStudent(id) {
                if (confirm('确定删除该学生吗？')) {
                    await axios.delete(`/api/students/${id}`);
                    await this.loadStudents();
                    await this.fetchStats()
                }
            },
            openStudentForm() {
                this.formState = 'ADD';
                this.studentForm = {
                    studentId: '',
                    name: '',
                    age: '',
                    gender: '',
                    classNum: '',
                    type: '',
                    province: '',
                    city: '',
                    street: '',
                    doorNumber: '',
                    major: '',
                    supervisor: '',
                    researchFiled: '',
                    scores: {}
                }
                this.showStudentForm = true;
            },
            removeCourse(course) {
                delete this.studentForm.scores[course];
            },
            addCourse() {
                const newCourseName = `course${Object.keys(this.studentForm.scores).length + 1}`;
                this.studentForm.scores[newCourseName] = 0;
            },
            tempCourse(course) {
                this.courseTemp = course;
            },
            updateCourse(oldCourseName, newCourseName) {
                if (oldCourseName !== newCourseName) {
                    this.studentForm.scores[newCourseName] = this.studentForm.scores[oldCourseName];
                    delete this.studentForm.scores[oldCourseName];
                }
            },
            updateScore(course, score) {
                this.studentForm.scores[course] = parseInt(score);
            },
            closeStudentForm() {
                this.showStudentForm = false;
            },
            async addStudent() {

                try{
                    const response = await axios.post('/api/students', this.studentForm);
                    if(response.data.code === 400){
                        alert(response.data.msg);
                        return;
                    }
                } catch (error) {
                    console.error('Error adding student:', error);
                }

                await this.loadStudents();
                await this.fetchStats()
                this.showStudentForm = false;
            },
            async updateStudent() {

                try{
                    const response = await axios.put(`/api/students/${this.studentIdTemp}`, this.studentForm);
                    if(response.data.code === 400){
                        alert(response.data.msg);
                        return;
                    }
                } catch (error) {
                    console.error('Error updating student:', error);
                }

                await this.loadStudents();
                this.showStudentForm = false;
            },
            async fetchStats() {
                try {
                    const response = await axios.get('/api/students/stats')
                    this.stats = response.data.data
                } catch (error) {
                    console.error('统计信息获取失败:', error)
                }
            },
            calculatePercentage(value) {
                if (!this.stats.total) return 0
                return ((value / this.stats.total) * 100).toFixed(1)
            }
        }
    }).mount('#app')
</script>
</body>
</html>